import { Outlet, useNavigate } from "react-router-dom";
import { Layout, Menu } from "antd";

import "./index.css";

const Home = () => {
  const navigate = useNavigate();
  const { Header } = Layout;

  const handelSelet = (item: any) => {
    const path = item.key;
    navigate(`/home/${path}`);
  };

  return (
    <Layout className="layout">
      <Header className="header">
        <div className="logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={["task-center"]}
          onSelect={handelSelet}
        >
          <Menu.Item key="task-center">任务中心</Menu.Item>
          <Menu.Item key="message-center">消息中心</Menu.Item>
          <Menu.Item key="manage-center">管理中心</Menu.Item>
        </Menu>
      </Header>
      <Layout>
        <Outlet />
      </Layout>
    </Layout>
  );
};

export { Home };
